<!--  -->
<template>
  <teleport to="#message">
    <div class="alert message-info fixed-top w-50 mx-auto d-flex justify-content-between mt-2" :class="classObject" v-if="isVisible">
      <span>{{message}}</span>
      <button type="button" class="close" data-dismiss="alert" @click.prevent="hide">
        <span aria-hidden="true">&times;</span>
      </button>

    </div>
  </teleport>

</template>

<script lang="ts">
import { defineComponent, reactive, ref, PropType, onUnmounted } from 'vue';
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
export type MessageType = 'success' | 'error' | 'default'
export default {
  name: 'MessageComponents',
  props:{
    message: String,
    type: {
      type: String as PropType<MessageType>,
      default: 'default'
    }
  },
  emits: ['close-message'],
  setup( props: { type: string; }, context: { emit: (arg0: string, arg1: boolean) => void; } ) {
    const store = useStore()
    const router = useRouter()
    const node = document.createElement('div')
    node.id = 'message'
    document.body.appendChild(node)
    onUnmounted(() => {
      document.body.removeChild(node)
    })
    const isVisible = ref(true)
    const classObject = {
      'alert-success': props.type === 'success',
      'alert-danger': props.type === 'error',
      'alert-primary': props.type === 'default'
    }
    const hide = () => {
      isVisible.value = false
      context.emit('close-message', true)
    }
    return {
      isVisible,
      classObject,
      hide
    }
  }
}
</script>

<style  scoped lang='less'>

</style>
